<template>
  <div class="dynamic-table-select-wrap">
    <el-popover
      ref="popRef"
      :show-arrow="false"
      trigger="contextmenu"
      :visible="visible"
      :width="tableWidth || 500"
    >
      <template #reference>
        <el-input
          v-model="selectValue"
          :disabled="disabled"
          :readonly="readonly"
          @blur="onHandleBlur"
          @focus="onHandleFocus"
        >
          <template #append>
            <el-button :icon="Search" @click="openModal" />
          </template>
        </el-input>
      </template>
      <DynamicTableSelect
        v-model="visible"
        :dynamic-config="dynamicConfig"
        :is-focusing="isFocusing"
        :keywords="selectValue"
        @on-handle-confirm-selection="onHandleConfirmSelection"
      />
    </el-popover>

    <el-dialog
      v-if="isShowDynamicTableDialog"
      v-model="isShowDynamicTableDialog"
      :append-to-body="true"
    >
      <DynamicTableDialog
        :dynamic-config="dynamicConfig"
        @on-handle-confirm-selection="onHandleConfirmSelection"
      />
    </el-dialog>
  </div>
</template>

<script>
  import { Search } from '@element-plus/icons-vue'
  import DynamicTableDialog from '@/plugins/tableV2/components/DynamicTableDialog.vue'
  import DynamicTableSelect from '@/plugins/tableV2/components/DynamicTableSelect.vue'

  export default defineComponent({
    name: 'CommonDynamicTableSelect',
    components: { DynamicTableDialog, DynamicTableSelect },
    props: {
      modelValue: {
        type: [String, Number],
        default: '',
      },
      dynamicConfig: {
        type: Object,
        default: () => {
          return {}
        },
      },
      disabled: {
        type: Boolean,
        default: false,
      },
      readonly: {
        type: Boolean,
        default: false,
      },
      row: {
        type: Object,
        default: () => {
          return {}
        },
      },
      rowIndex: {
        type: Number,
        default: null,
      },
    },
    emits: {
      'on-open-dynamic-table-select': null,
      'on-handle-confirm-selection': null,
    },
    setup(props, { emit }) {
      const selectValue = ref(props.modelValue)
      const isShowDynamicTableDialog = ref(false)
      const popRef = ref(null)
      const visible = ref(false)
      const isFocusing = ref(false)
      const inputElInfo = ref({})
      const { tableWidth } = props.dynamicConfig?.selectTable || {}

      const isCanOpenModal = computed(() => {
        const { primaryTable = {} } =
          props.dynamicConfig?.dialogTableConfig || {}
        const { url, columnList = [] } = primaryTable
        return url && columnList.length
      })

      const openModal = () => {
        if (isCanOpenModal.value) {
          isShowDynamicTableDialog.value = true
        } else {
          const { row, rowIndex } = props
          emit('on-open-dynamic-table-select', { row, rowIndex })
        }
      }

      const onHandleConfirmSelection = (data) => {
        const { row, rowIndex } = props
        emit('on-handle-confirm-selection', { data, row, rowIndex })
        isShowDynamicTableDialog.value = false
      }

      const onHandleBlur = () => {
        selectValue.value = props.modelValue
        isFocusing.value = false
      }

      const onHandleFocus = () => {
        isFocusing.value = true
      }

      watch(
        () => props.modelValue,
        (newVal) => {
          if (newVal != selectValue.value) {
            selectValue.value = newVal
          }
        }
      )

      watch(
        () => selectValue.value,
        () => {
          visible.value = true
        }
      )

      onMounted(() => {})
      return {
        selectValue,
        isFocusing,
        isShowDynamicTableDialog,
        popRef,
        inputElInfo,
        visible,
        tableWidth,
        openModal,
        onHandleConfirmSelection,
        onHandleBlur,
        onHandleFocus,
        Search,
        DynamicTableDialog,
      }
    },
  })
</script>

<style lang="scss" scoped></style>
